<template>
  <div class="mange-box">
    <div class="right">
      <el-button type="primary">
        导入
        <input
          class="transparentInput"
          type="file"
          id="file-selector"
          accept=".json"
          @change="changef"
        />
      </el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="更新时间">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.lastUpdate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="拓扑名称">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.topoName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="拓扑类型">
        <template #default="scope">
          <el-tag size="medium">{{ topoType[scope.row.topo] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-popconfirm
            title="确认删除此拓扑？"
            confirm-button-text="是"
            cancel-button-text="否"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button
                size="mini"
                type="danger"
                :disabled="scope.row.isDefault"
                >Delete</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import request from "@/util/request.js";
import { getAllTopo, getTopoById, addTopo, delTopo } from "../api/manage";
export default {
  data() {
    return {
      topoType: ["静态路由", "RIP", "OSPF"],
      tableData: [
        {
          lastUpdate: "2016-05-02",
          topoName: "拓扑A",
          topo: 0,
          configId: 1,
          isDefault: true,
        },
        {
          lastUpdate: "2016-05-04",
          topoName: "拓扑B",
          topo: 1,
          configId: 2,
          isDefault: true,
        },
        {
          lastUpdate: "2016-05-01",
          topoName: "拓扑C",
          topo: 2,
          configId: 3,
          isDefault: true,
        },
      ],
    };
  },
  mounted() {
    this.fresh();
  },
  methods: {
    fresh() {
      console.log("fresh");
      getAllTopo().then((res) => {
        console.log(res);
        this.tableData = res.data.configs;
      });
    },
    handleEdit(index, row) {
      this.$store.commit("newConfigId", row.configId);
      getTopoById(row.configId).then((res) => {
        console.log(JSON.parse(res.data.config));
        this.$store.commit("newConfig", JSON.parse(res.data.config));
        this.$router.push("/");
      });
    },
    handleDelete(index, row) {
      delTopo(row.configId).then((res) => {
        console.log(res);
        this.fresh();
        this.$message({
          message: "删除拓扑成功",
          type: "success",
        });
      });
    },
    changef(e) {
      const fileList = e.target.files;
      console.log(fileList);
      var file = fileList[0];
      var reader = new FileReader();

      //上传进度
      reader.onprogress = function (data) {
        if (data.lengthComputable) {
          var progress = parseInt((data.loaded / data.total) * 100, 10);
          // console.log(progress);
          if (progress === 100) {
            this.loading = false;
            // console.log(this.loading)
          }
        }
      };
      let _this = this;
      //数据格式修正
      reader.onload = function (ev) {
        var data = ev.target.result;
        var newConfig = JSON.parse(data);
        console.log(JSON.parse(data));
        //   var topoType=newConfig.topotype==='static'?0:newConfig.topotype==='rip'?1:2
        addTopo(newConfig)
          .then((res) => {
            _this.fresh();
            _this.$message({
              message: "上传拓扑成功",
              type: "success",
            });
          })
          .catch((err) => {
            console.log(err);
            _this.$message({
              message: "上传拓扑失败",
              type: "error",
            });
          });
      };
      reader.readAsBinaryString(file);
    },
  },
};
</script>
<style scoped>
.mange-box {
  padding: 20px;
}
.right {
  display: flex;
  direction: rtl;
}
.transparentInput {
  position: absolute;
  overflow: hidden;
  right: 0;
  /*top: 0;*/
  opacity: 0;
}
</style>
